<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h1 id="hh"></h1>
</body>
</html>
<script>
    let data={
        name:"李雷",
        age:30,
        hobby:['吃','喝','写代码']
    }

    Object.defineProperty(data,'name',{
        configurable:false,//这个值为true，说明被劫持属性是可以被删除的
        enumerable:false,//控制当前被劫持的属性是否可以枚举
        // value:"小红"
        // writable:false,//控制被劫持的属性是否可以写入
        get(){
            //控制当前属性值
            // 只要属性被访问，就会触发get函数
            console.log('属性被访问了');
            return '李雷'
        },
        set(input){
            //对劫持的属性赋值，就会触发set
            console.log('属性被赋值了');
            console.log(input);
            document.getElementById("hh").innerText=input
        }
    })

    //删除一个属性
    // delete data.name;
    // console.log(data);

    console.log(Object.keys(data));

    data.name="小明"
    console.log(data.name);
</script>